<template>
    <view>
        <view class="cardBox">
            <image class="img" :src="image"/>
            <view>
                <view>欢迎,{{username}}！</view>
                <view>VIP等级:{{vip}}</view>
                <view>身份：{{identity}}</view>
            </view>
        </view>
    </view>
</template>

<script setup>
    import { computed} from 'vue'

    const props = defineProps({
        username: {
            type: String,
            default: "User"
        },
        vip: {
            type: Number,
            default: 0
        },
        image: {
            type: String,
            default: '../../static/logo.png'
        }
    })

    const identity = computed(() => {
        if (props.vip === 0) {
            return '普通用户'
        } else if (props.vip >= 1 && props.vip < 5) {
            return 'VIP'
        } else if (props.vip === 5) {
            return 'SVIP'
        }
    })

</script>

<style scoped lang="scss">
    .cardBox {
        width: 90%;
        height: 400rpx;
        background-color: #fff;
        border-radius: 10rpx;
        margin: 20rpx auto;
        padding: 20rpx;
        box-shadow: 0 2px 10rpx rgba(0, 0, 0, 0.1);
        display: flex;
        .img {
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
            margin-right: 20rpx;
        }
    }
</style>